<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper" ref="left">
        <ul>
          <!--  current -->
          <li
            class="menu-item"
            v-for="(good, index) in goods"
            :key="good.name"
            :class="{ current: index === currentIndex }"
            @click="clickItem(index)"
          >
            <span class="text bottom-border-1px">
              <img class="icon" :src="good.icon" v-if="good.icon" />
              {{ good.name }}</span
            >
          </li>
        </ul>
      </div>
      <div class="foods-wrapper" ref="right">
        <ul ref="rightUl">
          <li
            class="food-list-hook"
            v-for="(good, index) in goods"
            :key="index"
          >
            <h1 class="title">{{ good.name }}</h1>
            <ul>
              <li
                class="food-item bottom-border-1px"
                v-for="(food, index) in good.foods"
                :key="index"
                @click="showFood(food)"
              >
                <div class="icon">
                  <img width="57" height="57" :src="food.icon" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc">{{ food.description }}</p>
                  <div class="extra">
                    <span class="count">月售{{ food.sellCount }}份</span>
                    <span>好评率{{ food.rating }}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-if="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food" />
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <Food :food="food" ref="food" />
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from "vuex";

import Food from "../../../components/Food/Food";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      // 1). 右侧列表滑动的Y轴坐标: scrollY  在滑动过程中不断改变
      scrollY: 0,
      // 2). 右侧每个分类<li>的top值的数组tops: 第一次列表显示后统计后面不再变化
      tops: [],

      food: {}, //用于点击食品后显示放大后的详情
      isShowFood: false, //是否显示放大后的食品详情
    };
  },
  mounted() {
    // this._initScroll(); //创建BScroll实例
    if (this.goods.length > 0) {
      // console.log("mounted goods");
      this._initScroll();
      this._initTops();
    }
  },
  computed: {
    // ...mapState(["goods"]),
    ...mapState({
      goods: (state) => state.shop.shop.goods || [],
    }),
    currentIndex() {
      const { scrollY, tops } = this;
      return tops.findIndex(
        (top, index) => scrollY >= top && scrollY < tops[index + 1]
      );
    },
  },
  watch: {
    goods() {
      //goods有数据了
      //监视goods ，当goods数据一旦更新就会被监听到。然后在调用vm的$nextTick() 在这里面new BScroll
      // 因为new BScroll 要在有数据列表之后再创建这个实例。和new Swiper 一样
      // $nextTick() 是在dom数据更新之后才会调用这个方法 里面传一个回调函数(数据更新之后需要做的事情)
      this.$nextTick(() => {
        this._initScroll(); //创建BScroll实例
        this._initTops();
      });
    },
  },
  methods: {
    //初始化滑块  创建BScroll实例
    _initScroll() {
      new BScroll(this.$refs.left, {
        click: true,
      });
      this.rightScroll = new BScroll(this.$refs.right, {
        click: true, //分发自定义的click事件，因为BetterScroll 默认会阻止浏览器的原生 click 事件。
        probeType: 1, //只有设置了probeType属性才会监听滚动 。1：非实时，触摸滑动
        // probeType: 2, //2，实时，触摸滑动
        // probeType: 3, //3，实时，触摸，惯性，编码
      });

      //给右侧列表绑定scroll滚动监听
      this.rightScroll.on("scroll", (position) => {
        this.scrollY = Math.abs(position.y);
      });
      //给右侧列表绑定scrollEnd滚动结束监听
      this.rightScroll.on("scrollEnd", (position) => {
        this.scrollY = Math.abs(position.y);
      });
    },
    //统计右侧所有分类li的top列表（统计有多少个li）
    _initTops() {
      const tops = [];
      let top = 0;
      tops.push(top);
      // 需要将ref获取的li伪数组变成真数组
      const lis = Array.prototype.slice.call(this.$refs.rightUl.children);
      lis.forEach((li) => {
        top += li.clientHeight;
        tops.push(top);
      });
      // 更新tops数据
      this.tops = tops;
    },

    clickItem(index) {
      // 得到对应的top
      let top = this.tops[index];

      // 如果想立即选中当前右侧分类项 就要先改变scrollY的值
      this.scrollY = top;

      // 让右侧列表滑动到相应位置
      this.rightScroll.scrollTo(0, -top, 400);
    },
    /* 
    组件标签对象就是组件对象

      父组件调用子组件的方法: ref
      子组件调用父组件的方法: props
      */
    showFood(food) {
      // 更新数据
      this.food = food;
      // 显示food组件界面
      this.$refs.food.toggleShow();
    },
  },
  components: {
    Food,
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../../common/stylus/mixins.styl'
.goods
  display flex
  position absolute
  top 230px
  bottom 46px
  width 100%
  background #fff
  overflow hidden
  .menu-wrapper
    flex 0 0 80px
    width 80px
    background #f3f5f7
    .menu-item
      display table
      height 54px
      width 56px
      padding 0 12px
      line-height 14px
      &.current
        position relative
        z-index 10
        margin-top -1px
        background #fff
        color $green
        font-weight 700
        .text
          border-none()
      .icon
        display inline-block
        vertical-align top
        width 12px
        height 12px
        margin-right 2px
        background-size 12px 12px
        background-repeat no-repeat
      .text
        display table-cell
        width 56px
        vertical-align middle
        bottom-border-1px(rgba(7, 17, 27, 0.1))
        font-size 12px
  .foods-wrapper
    flex 1
    .title
      padding-left 14px
      height 26px
      line-height 26px
      border-left 2px solid #d9dde1
      font-size 12px
      color rgb(147, 153, 159)
      background #f3f5f7
    .food-item
      display flex
      margin 18px
      padding-bottom 18px
      bottom-border-1px(rgba(7, 17, 27, 0.1))
      &:last-child
        border-none()
        margin-bottom 0
      .icon
        flex 0 0 57px
        margin-right 10px
      .content
        flex 1
        .name
          margin 2px 0 8px 0
          height 14px
          line-height 14px
          font-size 14px
          color rgb(7, 17, 27)
        .desc, .extra
          line-height 10px
          font-size 10px
          color rgb(147, 153, 159)
        .desc
          line-height 12px
          margin-bottom 8px
        .extra
          .count
            margin-right 12px
        .price
          font-weight 700
          line-height 24px
          .now
            margin-right 8px
            font-size 14px
            color rgb(240, 20, 20)
          .old
            text-decoration line-through
            font-size 10px
            color rgb(147, 153, 159)
        .cartcontrol-wrapper
          position absolute
          right 0
          bottom 12px
</style>
